<template>
    <div class="login">

            <img class="logo-icon" src="@/views/login/static/logo.png"/>

        <van-form @submit="login">
            <van-field
                    v-model="userLogin.userId"
                    name="手机号"
                    label="手机号"
                    type="tel"
                    placeholder="手机号"
                    :rules="[{ required: true, message: '请填写手机号' }]"
            />
            <van-field
                    v-model="userLogin.password"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
            />

            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">登录</van-button>
            </div>
            <div style="margin: 16px;">
                <van-button round block type="info" v-on:click="toRegister()">注册</van-button>
            </div>
        </van-form>

    </div>
</template>

<script>
    import Vue from 'vue';
    import {ApiService} from "../../axios/apiService";
    import { Image as VanImage,Dialog} from 'vant';
    import md5 from 'js-md5';
    export const login= new ApiService('/login')//登录
    import { Form } from 'vant';

    Vue.use(Form);

    Vue.use(VanImage,Dialog);

    export default {
        props: {
        },
        data() {
            return {
                userLogin:{
                    userId:null,
                    password:'',
                }
            }
        },
        methods:{
            login(){
                var password = md5(this.userLogin.password)
                console.log("加密后的密码"+password)
                //登录请求
                login.getParams({//把用户名（name）和加密后的密码传给后端
                    password:password,
                    userId: this.userLogin.userId,
                }).then(res=> {//后端返回校验码（code）来显示是否登录成功
                    console.log(res.data);
                    if(res.data.code == 200) {
                        console.log("200000000000000000000000")
                        document.cookie = "userid="+res.data.data.id;//设置cookie，全局可用
                        //console.log('我是cookie'+ login.getCookie("userid"));//取出cookie
                        //提示跳转
                        Dialog.alert({
                            title:'系统提示',
                            message:'登陆成功'
                        }).then(()=>{
                                this.$router.push('user')
                            }
                        )
                    }
                })
            },
            toRegister(){
                this.$router.push('register')
            }

            }

    };
</script>
<style >
    .logo-icon{
        margin-left: 22%;

    }
    .login .head-icon {
        display: block;
        margin: auto;
    }
    .text {

        margin-top: 50px;
        margin-left: 10px;
        margin-right: 10px;
    }
    .account {
        position: relative;
        margin-top: 5px;
    }
    .password {
        position: relative;
        margin-top: 5px;
    }

</style>
